<template>
	<div>
		

	<div class="select3Wrap" ref='select3' :style="screenHeight">

		<div class="select3Box">
			<div class="sel flex-h">			
				<div class="swiper-container swiper-container-vertical swiper-container-free-mode selLeft" id="swiperSel1">
					<div class="swiper-wrapper">
						<div class="swiper-slide swiper-slide-active">
							<div class="bar1">
								<span :class="num1===index?'active1':''" v-for="(item,index) in sortdata" :key="index" @click="cli1(index)">{{item.collegeName}}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-container flex1 swiper-container-vertical swiper-container-free-mode selRight" id="swiperSel2">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
						<div class="bar2">
							
						
							<span :class="num2===$index?'active1':''" v-for="(its,$index) in erziData" @click="clikcDesc('univ',$index,its.majorCode,its.majorName)" :key="$index+10">{{its.majorName}}</span>
							</div>
			
						</div>
					</div>
				</div>
		


			</div>
		</div>
		<select-desc :showWho='whos' v-on:clearShowDesc="clearDesc" :showselect2='showsdesc' :mainsData='maDetailData' :majortitle='majortitles'></select-desc>
	</div>
	</div>
</template>

<script>
	import { getInformation, academyMajorInfos } from "~/api/college";
	import selectDesc from '~/components/selectNews2'
	import 'swiper/dist/css/swiper.css'
	import Swiper from 'swiper'
	import ls from 'store2'
	export default {
		props: {
			syStyle:Boolean,
			shows1: Boolean
		},
		components: {
			selectDesc
		},
		data() {
			return {
				majortitles:'',
				maDetailData:{},
				screenHeight: '',
				showsdesc: false,
				whos: '',
				num1: 0,
				num2: 0,
				num3: 0,
				erziData: [],
				sunziData: [],
				sortdata: [],

			};
		},
		computed: {

		},
		mounted: function() {
			this.$vux.loading.show({
				text: '正在加载'
			})
			this.showFirst()
			

		},
		methods: {
			showFirst() {
				let adhei = window.screen.height - 82
				this.screenHeight = "height:" + adhei + "px"


				this.showMajor()
			},
			showMajorDetail(ids) {
			getInformation({
					"academyCode": ls.get('applsData').academyCode+"",
					"majorCode":ids
				}).then(res => {
					this.maDetailData = res.data;
					this.$vux.loading.hide();
					// this.$vux.toast.text(res.message);
				}).catch((error) => {
					this.$vux.toast.text('服务器故障');
				})
			},
			showMajor() {
				academyMajorInfos({
					"academyCode": ls.get('applsData').academyCode+"",
				}, true).then(res => {
					this.sortdata = res.data
					this.erziData = this.sortdata[0].academyMajorInfoVos;
					this.$vux.loading.hide();
					setTimeout(()=>{
						this.swip1()
						
					},50)
					// this.$vux.toast.text(res.message);
				}).catch((error) => {
					this.$vux.toast.text('服务器故障');
				})
			},
			swip1() {
				var mySwiper = new Swiper("#swiperSel1", {
					direction: 'vertical',
					initialSlide: 0,
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true, //修改swiper的父元素时，自动初始化swiper
					slidesPerView: 'auto',
					mousewheelControl: true,
					freeMode: true

				});
				setTimeout(()=>{
					this.swip2()
				},50)
			},
			swip2() {
				var mySwiper = new Swiper("#swiperSel2", {
					direction: 'vertical',
					initialSlide: 0,
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true,
					slidesPerView: 'auto',
					mousewheelControl: true,
					freeMode: true

				});
			},
			clearDesc() {
				this.showsdesc = false
			},
			clikcDesc(sre,$index,ids,nsa) {
				// this.num3 = index;
				this.$vux.loading.show({text: '正在加载'})
				this.num2 = $index;
				this.whos = sre;
				this.majortitles=nsa;
				this.showMajorDetail(ids);
				
				this.showsdesc = true;

			},
			cli1(index) {
				this.num1 = index
				console.log(index)
				this.erziData = this.sortdata[index].academyMajorInfoVos;
				this.num2 === 0 ? '' : this.num2 = 0;
				this.swip2()
			},
			cli2(index) {
				this.num2 = index;
				console.log('erz', index)
				// this.sunziData = this.erziData[index].list;
				console.log('num2', this.num2)
			},
	

		}
	};
</script>


<style scoped lang="less">
	.select3Wrap {
		width: 7.5rem;

		background: #fff;
		overflow: hidden;
		padding-bottom: 0.5rem;
		padding-top: 0.4rem;

		
		.select3Box {

			width: 6.9rem;
			min-height: 5rem;
			height: auto;
			margin: 0.3rem auto 0;
			border: 1px solid rgba(238, 238, 238, 1);

			.selLeft {
				width: 3rem;
				height: 6rem;
				overflow: hidden;

			}
			.selRight {
				height: 6rem;
				overflow: hidden;
			}
			.swiper-container {
				height: 6rem;
				overflow: hidden;

				.swiper-slide {
					height: auto
				}
			}

			

			.sel {
				height: auto;
				align-items: initial;

				.bar1 {
					min-height: 100%;
					width: 3rem;
					height: auto;
					background: rgba(245, 245, 245, 1);
				}

				.bar2 {
					height: 100%;
					// background: blue;
				}

				.bar3 {
					height: 100%;
					// background: red;

				}

				.bar1,
				.bar2,
				.bar3 {
					span {
						display: block;
						height: 1rem;
						width: 100%;
						text-align: center;
						line-height: 1rem;
						font-size: 0.26rem;
						font-weight: bold;
						color: rgba(34, 34, 34, 1);
					}

					.active1 {
						background: #fff;
						color: rgba(104, 189, 26, 1);
					}
				}

				.bar2 {
					span {
						// box-shadow:-1px 0px 0px 0px rgba(238,238,238,1);
						border-right: 1px solid rgba(238, 238, 238, 1);
					}

					.active1 {
						border-right: none;
						// border-top: 1px solid rgba(238, 238, 238, 1);
						// border-bottom: 1px solid rgba(238, 238, 238, 1);
					}

					span:nth-of-type(1) {
						border-top: none;
					}

					span:nth-last-of-type(1) {
						border-bottom: none;
					}
				}
			}
		}

	}
</style>
